<template>
  <div>
    <List :nameList="nameList">
      <template #header>
        <h2 class="header">0516学生列表</h2>
      </template>

      <template #nameItem="{ person }">
        <li :style="{ background: person.age < 18 ? 'red' : '' }">
          {{ person.name }}---{{ person.age }}
        </li>
      </template>
    </List>
  </div>
</template>

<script>
import List from "./components/List";
export default {
  name: "App",
  components: {
    List,
  },
  data() {
    return {
      nameList: [
        { id: "001", name: "张三", age: 20 },
        { id: "002", name: "李四", age: 10 },
        { id: "003", name: "王五", age: 22 },
        { id: "004", name: "赵六", age: 14 },
        { id: "005", name: "郑七", age: 50 },
        { id: "006", name: "老八", age: 41 },
        { id: "007", name: "小九", age: 12 },
      ],
    };
  },
};
</script>

<style scoped>
.typeList {
  display: flex;
  justify-content: space-around;
}

.header {
  background: orchid;
}
</style>
